<h1>Creating the first Component: do it yourself !</h1>
<ul>
	<li>Start by creating a simple directory structure. Create a first
	directory at the same location as Archetype for containing the whole
	application. Call it "Example".</li>

	<li>In this new directory, create those ones:
	"components", "templates" and "styles" (this structure is the most
	common one but is not mandatory).</li>

	<li>Now, the component !
	<ul>
		<li>Create a new file in Example/components. Call it
		"controller.js"</li>
		<li>Copy and paste this in the file: <pre>
Archetype.Component.create({
	name:"Example.components.controller",
	/**
	 * Set up the Component dependencies
	 */
	setup:{
		dependencies: {
			components:{},
			lib:[]
		}
	},
	/**
	 * Constructor
	 */
	initialize: function () {
		$("bodyContent").observe("click", this.createDate);
	},
	/**
	 * Private method which launch the DateUpdate event
	 * with the current date in parameter
	 */
	_createDate : function () {
		this.fireDateUpdate(new Date());
	},
	/**
	 * Fire a "DateUpdate" event
	 */
	fireDateUpdate: _,
	/**
	 * Listen to "DateUpdate" event
	 */
	onDateUpdate: function(eventName, date) {
		Logger.log("controller received a date:" + date);
	}
});
		</pre></li>
	</ul>
	</li>

	<li><strong>Now click on the page to go next page</strong></li>
</ul>
